<script setup lang="ts">
// 接口普通写法
interface Person {
  readonly id: number // 只读属性
  name: string
  age: number
  sex?: string // 可选属性
}
let employee: Person = {
  id: 1,
  name: 'rose',
  age: 20,
  sex: 'man',
}
console.log('employee: ', employee)
// employee.id = 2 // 报错，因为id是只读属性

// 索引类型接口
interface StringInter {
  [prop: string]: string
  name: string
  age: string
}
let Person: StringInter = {
  name: 'rose',
  age: '20',
  sex: 'man',
}

interface NumberInter {
  readonly [index:number]:number
}
let arr :NumberInter = [1,2,3]
console.log(arr)

// 函数类型接口
interface Compare {
  (a: number, b: number): boolean
}
const myFunction: Compare = (a: number, b: number) => {
  return a > b
}
console.log(myFunction(1,2));



interface CallbackFunction {
  (params: string): number
}
function calcLen(callback: CallbackFunction): number {
  let userInput = 'function'
  let len = callback(userInput)
  return len
}
const result = calcLen((userInput: string) => {
    return userInput.length; // 返回输入字符串的长度，符合返回number类型的要求
});
console.log(result);


// 接口继承

interface Shape {
  color: string
}

interface Paint {
  paint: () => void
}

interface ISquare extends Shape, Paint {
  sideLen: number
}

// 该类名为Square，它实现了名为ISquare的接口
class Square implements ISquare {
  color: string
  sideLen: number
  constructor(color: string, sideLen: number) {
    this.color = color
    this.sideLen = sideLen
  }
  paint() {
    console.log(`${this.color} ${this.sideLen}`)
  }
}
const square = new Square('red', 4)
square.paint()


// 接口继承类
// 定义一个基类
class Animal {
  breath() {}
}
interface Mammal extends Animal {
  move: () => void
}
class Cat implements Mammal {
  move() {}
  breath() {
    console.log('Cat类的breath')
  }
}
var cat = new Cat()
cat.breath()
</script>

<template>
</template>